| 实验一 基于CSS+HTML+JS开发简单个人网站 | 您所在的位置：网站首页 › app store有的软件没有 › 实验一 基于CSS+HTML+JS开发简单个人网站 |
实验一 基于CSS+HTML+JS开发简单个人网站
|
目录： 实验要求 实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容 总结 实验要求 实验一 基于CSS+HTML+JS开发简单个人网站实验学时：4 实验类型：设计 一、目的与任务 目的：熟悉在静态网页制作基本流程，熟练应用CSS+HTML+JS。 任务：使用CSS+HTML+JS，开发简易个人网站。 二、内容、要求与方法步骤 1、个人网站分为四个部分：注册页面，登录界面，主界面，以及分界面。 1）注册页面需要使用到用户名及密码等信息，用到的标签有表格、文本框、单选按钮、复选按钮、下拉列表框等基本的标签；登录界面需要输入用户名和密码； 2）登陆成功后，可利用javascript判断输入用户名和密码的正确性，输入正确，则利用form标签中action转向主界面，如果输入不正确，可用警告框提醒用户：“输入不正确，再次输入”； 3）主界面类似图1-1，采用四个盒子分别代表个人简历，我的理想，我的生活，学习内容。每个盒子都采用float浮动。
个人简历界面：主要是css3实体样式；同样采用了四个盒子分别介绍四个内容。如图1-2，具体内容自定。
图1-2个人简历界面 我的理想界面：列举我的理想，可以使用无序列表或者表格排列。 我的生活界面：主要内容采用展示照片墙或者视频来体现。 学习内容界面：采用list-style:none的有序列表。 具体操作步骤： 1）准备网站需要的素材：图片和视频； 2）可利用记事本或者Jbuilder编写各个页面。 3）注意各页面之间的转向或者链接关系 4）打开浏览器，观察各个页面运行结果。 2、实验安排方式：上机编码。 3、实验结果展示，包括代码（可分栏展示）和效果图。 实验代码 1.注册注册比较简单，只是做了一个注册的页面。 注册 .bjimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; object-fit: cover; } #login_box { width: 30%; height: 300px; background-color: #00000080; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } tr{ border: 1px solid beige; } td{ border: 1px solid aliceblue; } h2 { color: #ffff; margin-top: 5%; } #input-box { margin-top: 5%; } span { border: 0; width: 60%; font-size: 15px; color:rgb(203, 197, 197); background: transparent; padding: 10px 3px; outline: none; margin-top: 10px; } input { border: 0; width: 60%; font-size: 15px; color: #fff; background: transparent; border-bottom: 2px solid #fff; padding: 5px 10px; outline: none; margin-top: 10px; } button { margin-top: 10px; width: 60%; height: 30px; border-radius: 10px; border: 0; color: #fff; text-align: center; line-height: 30px; font-size: 15px; background-image: linear-gradient(to right, #4b1919, #3f3a3e); } #sign_up { margin-top: 45%; margin-left: 60%; } a { color: #fff; } 注册 年级班级： 19级 20级 21级 一班 二班 三班 四班 五班 六班 性别: 男 女 注册 已有账号？请登录 function register(){ var username1=document.getElementById("username1").value; var password1=document.getElementById("password1").value; //localStorage存储注册信息 localStorage.setItem("username1",username1); localStorage.setItem("password1",password1); if(username1=='' || password1==''){ alert("用户名或密码不能为空！"); } else{ window.location.href="登录.html"; } }
2.登录
登录密码为1 2，这里有一个错误我没有解决，但是无影响。 登录 .bjimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; object-fit: cover; } #login_box { width: 30%; height: 300px; background-color: #00000060; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } h2 { color: #ffffff90; margin-top: 5%; } #input-box { margin-top: 5%; } span { color: #fff; } input { border: 0; width: 60%; font-size: 15px; color: #fff; background: transparent; border-bottom: 2px solid #fff; padding: 5px 10px; outline: none; margin-top: 10px; } button { margin-top: 30px; width: 60%; height: 30px; border-radius: 10px; border: 0; color: #fff; text-align: center; line-height: 30px; font-size: 15px; background-image: linear-gradient(to right, #101008, #3f3a3e); } #sign_up { margin-top: 45%; margin-left: 60%; } a { color: #b94648; } 登录 立即登录 没有账号？请注册 //判断登录是否成功 function login(){ //获取注册时存储在localStorage中的值 var username1=localStorage.getItem("username1").value; var password1=localStorage.getItem("password1").value; var username=document.getElementById("username").value; var password=document.getElementById("password").value; //判断输入的信息和注册的信息是否一致 if(username!='' && password!=''){ if (username==''&& password==''){ window.location.href="我的理想.html"; } if (username=='1' && password=='2'){ window.location.href="主页.html"; } else{ alert("用户名或密码错误，请重新输入！"); } } else{ alert("用户名或密码不能为空！"); } }
3.主页
主页
/*设置图片样式*/
#div_box {
width: 1100px;
height: 500px;
font-family: "宋体";
background-color: #ffffff90;
margin: auto;
margin-top: 3%;
text-align: center;
border-radius: 10px;
padding: 20px 50px;
}
body{
background:url("羊村.jpg")
no-repeat;
background-size: 1300px 650px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
h{
text-align: center;
margin-top:0px;
font-size: 20px;
color:rgb(9, 8, 8);
font-family: "宋体";
}
h1{
text-align: center;
margin-top:30px;
font-size: 30px;
color:rgb(13, 11, 11);
font-family: "宋体";
}
/*设置div的基础样式*/
div{
width: 250px;
height: 250px;
border-radius: 50%;
}
/*设置header和footer的样式*/
#header,#footer{
width: 1190px;
margin: auto;
margin-top: 100px;
}
/*设置子div的样式*/
#div01{
border: solid 0px #ffffff90 ;
float: left;
margin-right: 20px;
}
#div02{
border: solid 0px #ffffff90;
float: left;
margin-right: 20px;
}
#div03{
border: solid 0px #ffffff90 ;
float: left;
margin-right: 20px;
}
#div04{
border: solid 0px #ffffff90;
float: left;
}
#log
{
color:rgb(100, 50, 355);
font-size: 55px;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
a:visited {color:rgb(2, 1, 1);}
a:hover {color:rgb(24, 21, 198);}
欢迎来到我的主页
个人简介
我的理想
我的生活
学习内容
4.个人简介
个人简介
/*设置图片样式*/
#div_box {
width: 1050px;
height: 500px;
margin: 10px 50px;
background-color: #ffffff90;
border: 1px solid #FFFFFF90;
color: rgb(7, 7, 7);
font-family: "宋体";
text-align: center;
border-radius: 10px;
padding: 20px 50px;
}
h2{text-align: right;
font-family: "宋体";
color:#100f0f;
font-size: 18px;
margin-right:15px;
}
body {
background:url("羊村.jpg")
no-repeat;
background-size:120% 100%;
}
/*设置div的基础样式*/
div{width: 240px;
height: 320px;
}
/*设置header和footer的样式*/
#header,#footer{width: 1050px;
margin: auto;
margin-top: 30px;
}
/*设置子div的样式*/
#div01{
border: solid #ffffff90;
float: left;
background-color: #ffffff90 ;
margin-right: 20px;
}
#div02{
border: solid #ffffff90 ;
float: left;
background-color: #ffffff90;
margin-right: 20px;
}
#div03{
border: solid #ffffff90;
float: left;
background-color: #ffffff90;
margin-right: 20px;
}
#div04{
border: solid #ffffff90 ;
float: left;
background-color: #ffffff90;
}
div p{
text-align: right;
display: block;
font-size: 25px;
text-align: center;
color: rgb(6, 6, 6);
font-weight: bold;
}
div span{
display: block;
font-size: 18px;
text-align: left;
color: rgb(5, 5, 5);
font-weight: bold;
}
点此返回我的主界面？返回
a:visited {color:#db1b1e;}
a:hover {color:#480738;}
个人简介
个人信息 *姓名：包包大人 *性别：女 *家乡： *民族：汉族联系方式 *电话号码：* *QQ：* *微信：* *地址：*兴趣爱好 *喜欢包包夫人 *打游戏 *拍照 *喝奶茶特长技能 *干饭 *暂时无 *无 *无
5.我的理想
我的生活二
/* 重置默认样式 */
#div_box {
width: 800px;
height: 400px;
background-color: #ffffff90;
border: 1px solid #FFFFFF90;
color: rgb(7, 7, 7);
font-family: "宋体";
text-align: center;
padding: 50px 50px;
margin: 30px 200px;/*上，左距离*/
border-radius: 10px;/*改变形状*/
}
h1{
text-align: center;
margin-top:20px;
font-size: 24px;
font-family: "宋体";
}
h2{text-align: right;
font-family: "宋体";
margin-right:15px;
margin-top:0; color:#3e3b3b;
font-size: 15px;
}
body{
background:url("羊村.jpg")
no-repeat;
background-size: 1300px 650px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
.list{
width: 1100px;
height:450px;
display: flex;
margin:20px auto;
flex-wrap: wrap;
}
.list li{
width:400px;
height:350px;
border-radius: 10px;/*矩形角圆弧度*/
margin-top:5px;
list-style: none;
}
.list img{
margin-left: 30px;
margin-top:10px;
}
.title{
font-size:20px;
text-align: left;
color:#333333;
text-decoration:
underline rgb(4, 0, 0); /*色下划线*/
}
.smalltitle{
display: block;
font-size: 17px;
color: #060101 ;
text-align: left;
}
点此返回我的主界面？返回
我的理想
理想生活 家人平安健康，生活幸福美满 近期目标 学好专业知识 
6.我的生活
我的生活二
/* 重置默认样式 */
*{
margin:0;
padding: 0;
}
h1{text-align: center; font-family: "宋体";
}
h2{text-align: right;
font-family: "宋体";
margin-right:15px;
margin-top:0; color:#3e3b3b;
font-size: 15px;
}
body{
background:url("羊村.jpg")
no-repeat;
background-size: 1300px 650px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
.list{
width: 1250px;
height:550px;
display: flex;
margin:20px auto
;
background-color: #ffffff90;
flex-wrap: wrap;
}
.list li{
width:310px;
height:250px;
background-color:#ffffff90;
border-radius: 10px;
margin-top:5px;
box-shadow: 0 0 0px #dedede;
list-style: none;
transition: all .2s;/*控制时间*/
}
.list img{
margin-left: 20px;
margin-top:14px;
}
.title{
font-size:20px;
color:#333333;
}
.smalltitle{
text-align: right;
display: block;
font-size: 17px;
text-align: center;
color: rgb(6, 6, 6);
}
.list li:hover{
box-shadow: 10px 10px 10px #fff;
transform:scale(1.1);
}
照片墙
点此返回我的主界面？返回
超级喜欢包包大人 
可爱猫猫 
最喜欢的偶像 
生日聚餐 
2021年中秋节收到的月饼 
2020年武汉玩纪念 
和室友聚餐
包包大人开车 
7.学习内容
学习内容
body{
background:url("羊村.jpg")
no-repeat;
background-size: 1300px 650px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
div.transbox
{
width: 800px;
height: 500px;
margin: 40px 230px;
background-color: #ffffff90;
border: 1px solid #FFFFFF90;
opacity:0.8;
}
h1{text-align: center;
font-family: "宋体";
color:#060000;
margin-top:20px;
font-size: 24px;
}
h2{text-align: left;
font-family: "宋体";
color:#100f0f;
font-size: 20px;
margin-left:3cm;
}
h3{text-align: right;
font-family: "宋体";
color:#100f0f;
font-size: 18px;
margin-top:2px;
margin-right:15px;
}
p{text-align: right;
font-family: "宋体";
color:#020001;
font-size: 18px;
margin-right:15px;
}
点此返回我的主界面？返回
#每日学习内容#
记英语单词学专业知识
保持锻炼
少熬夜，早睡
......
j2ee老师布置的实验，简单的个人网站，以上附代码和实现界面，虽然我分了七个点，但是每个界面用的代码都是差不多的，对了，图片和代码记得放在同一个文件夹下，因为我淋过雨，所以为有缘看到的学弟学妹撑伞，我水平很低，仅供参考。 |
图1-1 主界面
【本文地址】
公司简介
联系我们